<template>
  <div class="q-pa-md">
    <div class="q-gutter-md row">
      <t-btn color="primary" label="Content Class Menu">
        <t-menu class="bg-purple text-white" auto-close>
          <t-list style="min-width: 100px">
            <t-item clickable>
              <t-item-section>New tab</t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>New incognito tab</t-item-section>
            </t-item>
            <t-separator dark />
            <t-item clickable>
              <t-item-section>Recent tabs</t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>History</t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>Downloads</t-item-section>
            </t-item>
            <t-separator dark />
            <t-item clickable>
              <t-item-section>Settings</t-item-section>
            </t-item>
            <t-separator dark />
            <t-item clickable>
              <t-item-section>Help &amp; Feedback</t-item-section>
            </t-item>
          </t-list>
        </t-menu>
      </t-btn>

      <t-btn color="primary" label="Content Style Menu">
        <t-menu :style="{ backgroundColor: '#9C27B0', color: 'white' }">
          <t-list style="min-width: 100px">
            <t-item clickable>
              <t-item-section>New tab</t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>New incognito tab</t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable>
              <t-item-section>Recent tabs</t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>History</t-item-section>
            </t-item>
            <t-item clickable>
              <t-item-section>Downloads</t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable>
              <t-item-section>Settings</t-item-section>
            </t-item>
            <t-separator />
            <t-item clickable>
              <t-item-section>Help &amp; Feedback</t-item-section>
            </t-item>
          </t-list>
        </t-menu>
      </t-btn>
    </div>
  </div>
</template>
